<template>
    <div>
        <div style="margin: 20px 0">
            <el-button type="primary" @click="handleAdd">创建角色</el-button>
            <el-button type="success" :disabled="currentRow == null ? true : false" @click="roleAuthVisible = true">设置权限</el-button>
        </div>
        <el-table ref="singleTableRef" :data="roleList" highlight-current-row style="width: 100%" height="500"
            :border="true" @current-change="handleCurrentChange">
            <el-table-column type="index" width="80" label="序号" />
            <el-table-column property="name" label="角色名称" />
            <el-table-column property="create_time" label="创建时间" :formatter="resetDate" />
            <el-table-column property="auth_time" label="授权时间" :formatter="resetDate" />
            <el-table-column property="auth_name" label="授权人" />
        </el-table>
        <!-- 添加角色弹窗 -->
        <el-dialog v-model="roleFormVisible" title="添加角色" width="500">
            <el-form :model="role" ref="roleFormRef" label-width="100px" style="width: 400px;" :rules="rules">
                <el-form-item label="角色名称" prop="name">
                    <el-input v-model="role.name" placeholder="请输入角色名称" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="addRole(roleFormRef)">确定</el-button>
                    <el-button @click="roleFormVisible = false">取消</el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 设置角色权限弹窗 -->
        <el-dialog v-model="roleAuthVisible" title="设置角色权限" width="500">
            <Auth :role="currentRow" v-if="roleAuthVisible" ref="authRef"/>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="updateData">确定</el-button>
                    <el-button @click="roleAuthVisible = false">取消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { nextTick, onMounted, reactive, ref } from 'vue';
// 引入格式化日期方法
import { formateDate } from '@/utils/dateUtils';
// 引入权限子组件
import Auth from "./components/Auth.vue"
// 格式化日期数据 row：当前要格式化数据所在行对象，colum：列对象，cellValue：要格式化的数据
const resetDate = (_row: any, _colum: any, cellValue: number, _index: number) => {
    return formateDate(cellValue)
}
// 引入角色数据类型
import type { roleInfoData } from "@/api/role/type"
// 引入角色小仓库
import useRoleStore from '@/store/modules/role'
import type { FormInstance, FormRules } from 'element-plus';
const roleStore = useRoleStore()
// 引入用户小仓库
import useUserStore from '@/store/modules/user';
const userStore = useUserStore()
// 角色列表（数据列表)
let roleList = ref<roleInfoData[]>([])
// 获取角色列表
const getRoles = () => {
    roleStore.getRoleList().then(() => {
        roleList.value = roleStore.roles
    })
}
// 当前选中的行
const currentRow = ref<roleInfoData|null>(null)


// 当选中行发生变化时发的函数 点击进行回调
const handleCurrentChange = (val: any) => {
    currentRow.value = val
}
// 添加角色表单ref对象
const roleFormRef = ref()
// 添加角色
const handleAdd = () => {
    roleFormVisible.value = true
    // 当组件中所有的dom元素加载完毕之后，回调函数才会执行
    nextTick(()=>{
        // 重置表单内容
        roleFormRef.value.resetFields()
    })
}

// 添加弹窗是否展示
const roleFormVisible = ref(false)

// 表单校验规则
const rules = reactive<FormRules>({
    name: [{ required:true, message:'请输入角色名称', trigger: 'blur' }],
})
// 添加角色表单数据收集对象
const role = ref({
    name: ''
})
// 添加角色确定按钮点击回调
const addRole = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      roleStore.addRole(role.value).then(()=>{
        roleFormVisible.value = false;
        // 刷新角色列表
        getRoles()
      })
    } else {
      console.log('error submit!')
    }
  })
}
// 权限组件ref对象，用于获取子组件对象中的数据和方法
const authRef = ref()
// 设置角色权限弹窗是否展示
const roleAuthVisible = ref(false)
const updateData = ()=>{
    // 先获取auth组件中getMenus方法,返回值为更新之后的角色数据
    const newRole = authRef.value.getMenus()
    console.log('newRole',newRole);
    
    // currentRow中才是真正存储这个角色没有修改之前的数据
    // @ts-ignore
    currentRow.value.menus = newRole.menus
    // @ts-ignore
    currentRow.value.name = newRole.name
    // @ts-ignore
    currentRow.value.auth_name = userStore.user?.username
    // @ts-ignore
    roleStore.updateRole(currentRow.value).then(()=>{
        roleAuthVisible.value = false
        getRoles()
    })
}
onMounted(() => {
    getRoles()
})
</script>

<style scoped></style>